<script setup>

</script>

<script seput>

</script>
<template>
    <div class="head">
        <div class="above">
            <div class="numbering">订单编号: 20231102112201</div>
            <div class="reception">
                <div class="left">
                    <span class="harvest">收</span>
                    <span class="pickup">接</span>
                </div>
                <div class="right">
                    <div class="da">
                        <span class="ming">王哲</span>
                        <span class="content">教学楼D2 302室</span>
                    </div>
                    <div class="da">
                        <span class="ming">李东贺</span>
                        <span class="content">教学楼D1 103室</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.head {
    width: 350px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 550px;
}

.above {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px 10px 10px 10px;
    background-color: white;

}

.above {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px 10px 10px 10px;
}

.numbering {
    color: #ccc;
    font-size: 14px;
    height: 25px;
    border-bottom: 1px solid #ccc;
    width: 90%;
}

.reception {
    padding-top: 10px;
    display: flex;
    gap: 20px;
}

.left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.harvest {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid #ccc;
    text-align: center;
    background-color: aqua;
}

.pickup {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid #ccc;
    text-align: center;
    background-color: chartreuse;
}

.right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 3px;
}

.da {
    display: flex;
    gap: 20px;
}

.content {
    color: #ccc;
    font-size: 14px;
}
</style>